<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var sheet_init = {};
		sheet_init.Cfg = {FrozenCol:0,SearchMode:smLazyLoad,Page:30};
		
		//HeaderMode
		sheet_init.HeaderMode = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		sheet_init.Cols = [
		       			{Header:"NO",		Type:"Seq", Align:"Right"},
		       			{Header:"상태",		Type:"Status", Align:"Center"},
		       			{Header:"삭제",		Type:"DelCheck"},
		       			{Header:"문자열",		Type:"Text", KeyField:1, Align:"Center"},
		       			{Header:"콤보",		Type:"Combo", Width:80, ComboText:"대기|진행중|완료", ComboCode:"01|02|03",PopupText:"대기|진행중|완료"},
		       			{Header:"콤보에디트",	Type:"ComboEdit", Width:80, ComboText:"고려대학교|고려대학교2|국민대학교|서울대학교|숙명여자대학교|연세대학교|울산대학교|울산과학기술대학교|이화여자대학교|인천대학교|인천가톨릭대학교"},
		       			{Header:"팝업",		Type:"Popup", Width:100},
		       			{Header:"팝업에디트",	Type:"PopupEdit", Width:100},
		       			{Header:"자동합계",	Type:"AutoSum", Align:"Right",Width:70,Format:"NullInteger"},
		       			{Header:"자동평균",	Type:"AutoAvg", Align:"Right",Width:70, Format:"NullFloat"},
		       			{Header:"정수",		Type:"Int", Align:"Right", Format:"Integer",Width:70, Hidden:1},
		       			{Header:"실수",		Type:"Float", Align:"Right", Format:"Float",Width:70, Hidden:1},
		       			{Header:"날짜",		Type:"Date", Align:"Center", Format:"Ymd", Width:100},
		       			{Header:"패스워드",	Type:"Pass", Hidden:1},
		       			{Header:"체크박스",	Type:"CheckBox"},
		       			{Header:"라디오",		Type:"Radio"}
		       		]; 
		
		IBS_InitSheet(mySheet, sheet_init);
	
		//컬럼의 너비 조정
		mySheet.FitColWidth();
		
		doAction("search");
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/sheet_data.xml");
				break;
		}
	}

	function setBackColor() {
		var color = $('#wColorPicker-input').val();
		mySheet.SetHeaderBackColor(color);
	}
	
	function mySheet_OnMouseDown(Button, Shift, X, Y) {
		var col_id = mySheet.MouseCol();
		$('#column_id').val(col_id);
		$('#column_width').val(mySheet.GetColWidth(col_id));
	}
	
	function setCeilAlign() {
		var col = $('#column_id').val();
		var width = $('#column_width').val();
		
		width = width?width:0;
		
		if (col > -1) {
			mySheet.SetColWidth(col, width);
		} else {
			alert("적용할 셀의 정보가 없습니다.");
		}
	}
	
	function setFitColWidth() {
		var width = $('#fitCol').val();
		mySheet.FitColWidth(width);
	}
	
	function setFitSize(onRow, onCol) {
		//var onRow = 0;		// 행높이 변경 여부
		//var onCol = 0;		// 컬럼 너비 변경 여부
		mySheet.FitSize(onRow, onCol);
	}
	
	function setExtendLastCol(onExt) {
		mySheet.SetExtendLastCol(onExt);
	}
	
</script>
<title>컬럼 너비 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">컬럼 너비 예제</div>
	<div id="desc">
		initColumns 은 시트 생성시 각 컬럼의 데이터 타입, 포맷, 기능들을 설정한다.<br>
		MinWidth 인자를 통해 컬럼 최소 가로크기를 지정할 수 있다.<br>
		<br>
		ColWidth 메서드를 이용하여 특정 컬럼의 너비를 설정하거나 확인한다.<br>
		픽셀 단위의 너비를 설정할 수 있고, 값을 0으로 설정하면 해당 컬럼 내의 Text 중 가장 긴 값에 맞게 너비를 자동 조정한다.<br>
		컬럼이 존재하지 않는 경우 에러메시지는 표시하지 않지만 처리는 취소된다.<br>
		<br>
		FitColWidth 메서드는 전체 넓이를 기준으로 모든 컬럼의 Width를 재조정하여 수평 스크롤이 생기지 않도록 한다.<br>
		Width 인자에 값을 설정하는 경우 전체 넓이 100%에 준하여 각 컬럼의 너비를 % 단위로 "|"로 묶어서 설정하면 % 단위로 컬럼의 Width를 재조정한다.<br>
		<br>
		FitSize 메서드는 모든 행의 높이와 모든 컬럼의 너비를 재조정한다.<br>
		RowHeight 인자가 1인 경우 모든 행의 높이를 데이터의 높이에 맞게 재조정하고, ColumnWidth 인자가 1인 경우 모든 컬럼의 너비를 컬럼 내의 가장 넓은 글자의 너비에 맞게 재조정한다.<br>
		<br>
		ExtendLastCol 메서드는 마지막 컬럼의 너비를 전체 너비에 맞게 자동으로 맞출것인지 여부를 확인하거나 설정한다.<br>
		이 속성은 Object 너비에 비해서 컬럼 전체 너비의 합이 작을 때 마지막 컬럼을 Object 너비에 맞게 자동으로 넓어지는 기능을 사용하기 위함이다.
	</div>

	<div id="functionArea">
		<div>ColWidth :
			<span>열 : <input id="column_id" size=4 type="text"/></span>
			<span>너비 : <input id="column_width" size=4 type="text"/>px</span>
			<input type="button" value="적용하기" onclick="setCeilAlign();">
		</div>
		<div>FitColWidth :
			<span><input id="fitCol" type="text" value="10|20|40|30"/></span>
			<span><input type="button" value="너비 재조정하기" onclick="setFitColWidth();"></span>
		</div>
		<div>FitSize :
			<span><input type="button" value="행높이 자동 변경" onclick="setFitSize(1, 0);"></span>
			<span><input type="button" value="컬럼 너비 자동 변경" onclick="setFitSize(0, 1);"></span>
			<span><input type="button" value="행, 컬럼 자동 변경" onclick="setFitSize(1, 1);"></span>
		</div>
		<div>ExtendLastCol :
			<span><input type="button" value="적용하기" onclick="setExtendLastCol(1);"></span>
			<span><input type="button" value="해제하기" onclick="setExtendLastCol(0);"></span>
		</div>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>